<template>
  <div>
    <div style="display: flex;box-sizing: border-box;">
      <div style="margin-right: 10px;">
        <el-table :data="tableData" border>
          <el-table-column label="GroupId" width="100" align="center">
            <template slot-scope="scope">
              {{ scope.row }}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="100" align="center">
            <template slot-scope="scope">
              <el-button type="text" @click="lookItem(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div style="flex:1;" v-loading="loading">
        <h2 style="margin-bottom: 20px;" v-if="info.id != undefined">GroupId：{{ info.id }}</h2>
        <el-button style="margin-bottom: 20px;" v-if="info.id != undefined" @click="exportData()">导出</el-button>
        <div v-if="info.id != undefined">
          <div class="chart-item">
            <ECharts :option="chartOptions1" />
          </div>
          <div class="chart-item">
            <ECharts :option="chartOptions2" />
          </div>
          <div class="chart-item">
            <ECharts :option="chartOptions3" />
          </div>
          <div class="chart-item">
            <ECharts :option="chartOptions4" />
          </div>
        </div>
        <div class="chart-item" v-if="info.ttp">
          <h2 style="margin-bottom: 10px;">ttp</h2>
          <div>{{ info.ttp }}</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import ECharts from '@/components/ECharts/ECharts.vue';
export default {
  components: {
    ECharts,
  },
  data() {
    return {
      tableData: [],
      info: {},
      loading: false,
      chartOptions1: {
        title: { text: 'dip_stat' },
        tooltip: {},
        xAxis: { data: [] },
        yAxis: {},
        series: [{
          type: 'bar',
          data: []
        }]
      },
      chartOptions2: {
        title: { text: 'features' },
        tooltip: {},
        xAxis: { data: [] },
        yAxis: {},
        series: [{
          type: 'bar',
          data: []
        }]
      },
      chartOptions3: {
        title: { text: 'interval' },
        tooltip: {},
        xAxis: { data: [] },
        yAxis: {},
        series: [{
          type: 'bar',
          data: []
        }]
      },
      chartOptions4: {
        title: { text: 'sip_stat' },
        tooltip: {},
        xAxis: { data: [] },
        yAxis: {},
        series: [{
          type: 'bar',
          data: []
        }]
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await this.$http.fetchGet("/api/getAllGroupId")
      if (res.code === 200) {
        this.tableData = res.data
      }
    },
    lookItem(row) {
      this.getInfo(row)
    },
    async getInfo(id) {
      this.loading = true
      const res = await this.$http.fetchGet("/api/getGroupIdDetail?id=" + id)
      if (res.code === 200) {
        if (!res.data) {
          this.loading = false
          this.$message.warning(`GroupId:${id}，未查询到数据！`)
          return
        }
        this.info = res.data.statistics
        const { dip_stat, features, interval, sip_stat, ttp } = res.data.statistics
        this.chartOptions1.xAxis.data = Object.keys(dip_stat)
        this.chartOptions2.xAxis.data = Object.keys(features)
        this.chartOptions3.xAxis.data = Object.keys(interval)
        this.chartOptions4.xAxis.data = Object.keys(sip_stat)
        this.chartOptions1.series[0].data = Object.values(dip_stat)
        this.chartOptions2.series[0].data = Object.values(features)
        this.chartOptions3.series[0].data = Object.values(interval)
        this.chartOptions4.series[0].data = Object.values(sip_stat)
        this.info.id = id
      }
      this.loading = false
    },
    async exportData() {
      const jsonStr = JSON.stringify(this.info, null, 2);
      const blob = new Blob([jsonStr], { type: 'application/json' });
      const url = URL.createObjectURL(blob);
      const link = document.createElement('a');
      link.href = url;
      link.download = 'data.json';
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
      URL.revokeObjectURL(url);
    },
  }
}
</script>

<style scoped>
.chart-item {
  border: 1px solid #ccc;
  box-sizing: border-box;
  margin-bottom: 10px;
}
</style>